Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

로그인, 투표 통계, 회원정보 페이지 lazy import 적용 #571

Merged
merged 6 commits into from
Sep 14, 2023

Conversation

Gilpop8663
Copy link
Collaborator

🔥 연관 이슈

close: #556

📝 작업 요약

  • 로그인, 투표 통계, 회원정보 페이지 lazy import 적용

⏰ 소요 시간

2시간

🔎 작업 상세 설명

  • 유저가 잘 들어가지 않는 페이지라고 생각하여서 매번 불러오는 것이 아닌 페이지를 이용할 때 번들을 불러오도록 설정

🌟 논의 사항

  • 모든 페이지를 lazy로 하려고 했으나 페이지를 옮길때 마다 잠깐 깜빡거리는 현상이 일어나서 사용성이 나빠진다고 생각했습니다
    차라리 초기 렌더 속도가 조금 느리더라도 페이지를 이동할때마다 깜빡거리는 현상이 없는 것이 사용성이 좋다고 생각해서 일부 페이지만 적용했습니다

@tjdtls690 tjdtls690 force-pushed the dev branch 2 times, most recently from 53f297e to a2388f1 Compare September 12, 2023 10:11
@inyeong-kang
Copy link
Member

👍👍 번들 결과가 이전이랑 어떤 차이가 있는지 정리해봐도 좋겠네요! 굳굳

@github-actions
Copy link

github-actions bot commented Sep 14, 2023

⚡️ Lighthouse report!

Category Score
🟠 Performance 56
🟠 Accessibilty 88
🟠 SEO 85
🟠 PWA 89
Category Score
🟢 First Contentful Paint 0.6 s
🔴 Largest Contentful Paint 4.8 s
🔴 Total Blocking Time 1,250 ms
🟢 Cumulative Layout Shift 0
🟠 Speed Index 4.3 s

Copy link
Collaborator

@chsua chsua left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

최적화 시작이군요...
최고입니다
번들도 이름이 매번 바뀌어 좋군요
우스
고생하셨습니다
늘 멋있는 우스

@inyeong-kang inyeong-kang merged commit 20d37ff into dev Sep 14, 2023
1 check passed
@inyeong-kang inyeong-kang deleted the feat/#556 branch September 14, 2023 06:20
Gilpop8663 added a commit that referenced this pull request Sep 14, 2023

* fix: (#598) 로그인 시 쿠키를 주고 받을 수 있도록 fetch 설정 변경 (#600)

* cookie의 path를 /auth에서 /로 변경 및 RefreshToken TTL설정 (#610)

* refactor: (#608) cookie의 path를 루트 경로로 지정

* refactor: (#608) refreshtoken을 redis에 저장할 때 ttl설정

* 구글 애널리틱스 작동을 위한 모듈 설치, 게시글 본문의 링크 클릭 가능하도록 구현 (#613)

* fix: (#612) react-gtm-module을 react-ga4 로 대체, RouteChangeTracker 컴포넌트 추가

* feat: (#606) 게시글 작성 시 링크 넣기 기능 추가

* feat: (#606) 게시글 본문에 링크 있으면 a 태그로 인식되도록 구현

* chore: (#606) 공지사항 설명 수정

* chore: (#606) 불필요한 주석 삭제

* 로그인, 투표 통계, 회원정보 페이지 lazy import 적용 (#571)

* feat: (#556) lazy import 설정 및 트리쉐이킹 설정

* feat: (#556) 로그인, 투표 통계, 회원정보 입력 페이지 lazy import 적용

* feat: (#556) 번들 이름 매번 바뀌도록 변경 및 수정되었던 코드 복구

* feat: (#556) Suspense 코드 복구

---------

Co-authored-by: jero_kang <[email protected]>

* 게시글 작성 시 이미지 파일을 보낼 때 webp 로 압축하여 성능 개선 (#614)

* feat: (#555) browser-image-compression 설치 및 본문 이미지 훅에 적용

* feat: (#555) 선택지 옵션 사진을 webp로 변환하도록 구현

---------

Co-authored-by: 최우창 <[email protected]>
Co-authored-by: Jun-Hyeok Sin <[email protected]>
Co-authored-by: jero_kang <[email protected]>
Co-authored-by: jeomxon <[email protected]>
Co-authored-by: aiaiaiai1 <[email protected]>
Co-authored-by: chsua <[email protected]>
Co-authored-by: lookh <[email protected]>
Co-authored-by: 김영길/KIM YOUNG GIL <[email protected]>
Co-authored-by: jero_kang <[email protected]>
Co-authored-by: chsua <[email protected]>
chsua pushed a commit that referenced this pull request Sep 19, 2023
* feat: (#556) lazy import 설정 및 트리쉐이킹 설정

* feat: (#556) 로그인, 투표 통계, 회원정보 입력 페이지 lazy import 적용

* feat: (#556) 번들 이름 매번 바뀌도록 변경 및 수정되었던 코드 복구

* feat: (#556) Suspense 코드 복구

---------

Co-authored-by: jero_kang <[email protected]>
chsua added a commit that referenced this pull request Sep 19, 2023
* design: (#541) 글쓰기 페이지 오른쪽 패딩 적용 및 헤더 글씨 크기 조정

- grid 속성 설정 + 내부 자식 width: 100% 설정
- 헤더 내 취소/제출 버튼을 헤더 글씨 버튼 컴포넌트로 수정(다른 헤더와 통일성 위해)

* design: (#482)  safari에서 글 쓸때 확대되어서 보이는 오류 수정

- 원인: 사파리에서는 input, textArea의 폰트 크기가 16px 미만이면 자동 zoom이 됨

* fix: (#482) 사파리에서 날짜가 nan뜨는 오류 수정

+ 현재와 30일 이상 차이나는 날짜는 "yyyy-mm-dd"형식 문자열로 그려지게 수정

* test: 날짜문자열과 현재 시간을 비교하여 문자열을 출력하는 유틸 함수 테스트 코드 작성

* design: (#541) 작성된 게시글 속 사진 가로 길이 80%으로 수정

* feat: 게시글 마감 제한 시간 정책변경에 따라 3일 -> 14일로 수정

- 공통된 Time interface type폴더로 이동 및 적용
- 마감 제한 시간 상수화
- 마감일자 optionList 형태 변경

* feat: 본문 내용에 연속되는 개행은 1회 개행으로 처리되도록 수정

* test: 연속된 개행을 1회 개행으로 수정하는 유틸함수 테스트

* test: 마감시간 버튼용 배열 변경에 따른 테스트 코드 수정

* fix: 선택된 time 객체 확인을 위해 비교하는 로직을 깊은 비교로 수정

* fix: 최대 마감일자 버튼 클릭 후 사용자 지정 클릭시 잘못된 ui가 출력되는 오류 수정

* fix: (#280) 선택지에 사진 등록/삭제 후 동일한 사진 올릴시 안올라가는 버그 수정

* refactor: 사용하지 않는 함수 삭제 및 시간 유효성 검사 함수 분리

* fix: 마감 최대 시간(14일)인 경우 마감시간 유효성 검사에 걸리지 않도록 수정

* fix: (#280) 선택지에 사진 등록/삭제 후 동일한 사진 올라가지 않는 오류 수정

- 누락된 파일 커밋

* feat: 글 등록/수정 api 수정에 따라 formData 형식 수정

* feat: (#541) imageUrl 앞 도메인 삭제

- 기존: 받은 imageUrl에 http-를 붙여야 image가 보여짐. 반대로 http-를 떼서 수정 api를 보내야 함
- 수정: 서버에서 보내주는 url 그대로 받아서 image를 보이고 수정 api를 보냄

* feat: 수정인 경우 수정 api 통신에 optionId를 함께 보내도록 수정

* refactor: 테스트 파일명 컨벤션에 따라 테스트 함수 이름으로 수정하기

* feat: 개행 5번 이상 연속되면 5번 개행으로 고정하도록 수정

* feat: 개행이 가능한 textarea의 value는 5회이상 연속개행을 검열하여 통신

- 코멘트, 선택지 내용 추가

* refactor: 마감시간 유효성 검사코드 중 변수를 선언하여 가독성 향상

* refactor: 글 작성/수정데이터 유효성 검사 type 체크 강화

* refactor: contentInputRefList 의 type중 null 제거

* test: 개행 검열 유틸함수 변경에 따른 테스트 코드 수정

* fix: (#541) 기존 작성한 선택지인 경우 id를 보내고, 아니면 보내지 않도록 수정

* test: 선택지 훅 수정에 따른 테스트 코드 수정

* fix: 선택지 훅에서 isServerId가 무조건 true인 오류 수정

* 로그인, 투표 통계, 회원정보 페이지 lazy import 적용 (#571)

* feat: (#556) lazy import 설정 및 트리쉐이킹 설정

* feat: (#556) 로그인, 투표 통계, 회원정보 입력 페이지 lazy import 적용

* feat: (#556) 번들 이름 매번 바뀌도록 변경 및 수정되었던 코드 복구

* feat: (#556) Suspense 코드 복구

---------

Co-authored-by: jero_kang <[email protected]>

* 게시글 작성 시 이미지 파일을 보낼 때 webp 로 압축하여 성능 개선 (#614)

* feat: (#555) browser-image-compression 설치 및 본문 이미지 훅에 적용

* feat: (#555) 선택지 옵션 사진을 webp로 변환하도록 구현

* 신고 도메인 리팩터링 (#540)

* refactor: (#513) Report 도메인 코드 가독성 리팩토링

* refactor: (#513) Report 도메인 관련 테스트 코드 리팩토링

* refactor: (#513) Report의 Controller, Service를 컨벤션에 맞춰 클래스명 개선

* refactor: (#513) 전략 패턴 클래스들에 대한 테스트 코드 추가

* refactor: (#513) Transactional 어노테이션 클래스에 붙는 것으로 위치 개선

* refactor: (#513) 닉네임 3회 신고 받은 후 해당 멤버에 대한 닉네임 신고 기록 삭제

* refactor: (#513) 각 신고 전략에 관한 상수는 각 클래스에 두는 것으로 개선

* refactor: (#513) 파라미터가 2개인 메서드의 선언문 개행 되돌리기

* refactor: (#513) deleteByReportTypeAndTargetId 메서드의 테스트 코드 추가

* refactor: (#513) 파라미터 2개인 메서드 선언부 개행 삭제

* 정사각형으로 나오는 이미지를 너비값 기준으로 보이게 변경 (#623)

* chore: (#620) package-lock.json 업데이트

* fix: (#621) 스토리북을 이용하려고 할 때 웹팩 chunk 관련 에러가 나는 것 수정

* style: (#620) 이미지의 가로, 세로 비율에 맞게 이미지를 보여주도록 수정

* style: (#620) 게시글 작성 시  선택지 이미지에 적용

* chore: (#620) 변경된 컴포넌트 이름이 적용되어 있지 않던 스토리북 파일 수정

* style: (#620) 게시글 작성시 본문 이미지에도 적용

* fix: (#627) 개발서버 오리진 url 수정 (#628)

* style: (#622) 선택지가 왼쪽으로 움직이는 버그 수정

* fix: (#629) https 로컬호스트 오리진 url 추가 (#630)

* feat: (#602) 본문 이미지를 붙여넣기 이벤트로 이미지를 첨부할 수 있도록 구현

* refactor: (#602) 선택지 작성에서 중복되는 업로드 이미지 코드를 리팩터링한 것을 적용

* refactor: (#602) 사용하지 않는 async 제거, 부자연스러운 함수명 변경

* 성능 최적화를 위한 리액트 쿼리 캐시정책 설정 및 불필요한 fetch하지 않기 (#626)

* chore: (#619) 리액트 쿼리 캐싱 확인을 위한 세팅

* feat: (#619) 마감된 게시물 상세정보 1시간 캐싱하기

* design: 에러 메세지 컴포넌트 어절 단위로 개행 및 상하 마진 수정

* feat: (#619) 통계 서버데이터 형식을 사용처가 아닌 불러오는 곳에서 형식 변경

* feat: (#619) 통계 페이지 리액트 쿼리로 수정 및 서스펜스, 에러바운더리 적용

* fix: 통계 api msw에서 실서버로 요청 전환

* fix: thead, tbody가 없어서 발생하는 에러 해결

* fix: (#627) 개발서버 오리진 url 수정 (#628)

* style: (#622) 선택지가 왼쪽으로 움직이는 버그 수정

* fix: (#629) https 로컬호스트 오리진 url 추가 (#630)

* feat: (#602) 본문 이미지를 붙여넣기 이벤트로 이미지를 첨부할 수 있도록 구현

* refactor: (#602) 선택지 작성에서 중복되는 업로드 이미지 코드를 리팩터링한 것을 적용

* refactor: (#602) 사용하지 않는 async 제거, 부자연스러운 함수명 변경

* refactor: (#619) 불분명한 변수명 수정

* feat: 열정유저 테이블 내 2개의 api 중 하나라도 로딩/에러 시 테이블 폴백처리

* refactor: (#619) 사용하지 않는 useFetch 삭제

* feat: (#619) 통계 페이지 에러바운더리/ 서스펜스 범위 수정

- 기존: 글 전체 통계에 서스펜스와 에러바운더리 적용, post api에는 에러바운더리만 적용
- 수정: 글 전체 통계와 post Api 한번에 감싸는 서스펜스와 에러바운더리 적용

* refactor: (#619) 서스펜스, 에러바운더리 감싸는 순서를 기존 코드와 통일

- 에러바운더리 안에 서스펜스, 그 안에 api 호출하는 컴포넌트

* feat: 리액트 쿼리 데브 툴 설정

---------

Co-authored-by: lookh <[email protected]>
Co-authored-by: Gilpop8663 <[email protected]>

* chore: (#631) https로 실행되도록 설정 및 스크립트 명령어 추가

* chore: (#631) pem키 gitignore에 추가
발급받은 기기에서만 유효한 pem키이기 때문에 git에 올릴 필요가 없음

* feat: (#563) 카테고리 즐겨찾기에 대한 낙관적 업데이트 구현 (#633)

* feat: (#541) imageUrl 앞 도메인 삭제

- 기존: 받은 imageUrl에 http-를 붙여야 image가 보여짐. 반대로 http-를 떼서 수정 api를 보내야 함
- 수정: 서버에서 보내주는 url 그대로 받아서 image를 보이고 수정 api를 보냄

* refactor: (#541) 불필요한 코드(이미지 업로드 버튼의 클릭이벤트) 삭제

* refactor: (#541) 사용하지 않는 유틸함수(이미지 url 수정) 삭제

* 정사각형으로 나오는 이미지를 너비값 기준으로 보이게 변경 (#623)

* chore: (#620) package-lock.json 업데이트

* fix: (#621) 스토리북을 이용하려고 할 때 웹팩 chunk 관련 에러가 나는 것 수정

* style: (#620) 이미지의 가로, 세로 비율에 맞게 이미지를 보여주도록 수정

* style: (#620) 게시글 작성 시  선택지 이미지에 적용

* chore: (#620) 변경된 컴포넌트 이름이 적용되어 있지 않던 스토리북 파일 수정

* style: (#620) 게시글 작성시 본문 이미지에도 적용

* [REFACTOR] 게시글 도메인 리팩터링 (#549)

* refactor: (#512) 게시글 댓글 도메인 리팩토링

* refactor: (#512) 테스트 엔티티 저장 유틸 클래스 구현

* refactor: (#512) 게시글 도메인 리팩토링

* refactor: (#512) 게시글 DTO 중복 제거 및 리팩토링

* refactor: (#512) 게시글 게스트 조회 기능에 대한 레포지토리 리팩토링

* refactor: (#512) 게스트 게시글 기능 리팩토링

* refactor: (#512) 게시글 조회 관련 레포지토리 리팩토링

* refactor: (#512) 게시글 조회 관련 애플리케이션 로직 리팩토링

* refactor: (#512) 게시글 조회 관련 API 리팩토링

* refactor: (#512) 사용하지 않는 클래스 제거

* refactor: (#512) 게시글 쿼리 기능을 위한 부가 클래스 구현

* refactor: (#512) 게시글 도메인 리팩토링

* refactor: (#512) 게시글 쿼리 관련 레포지토리 기능 구현

* refactor: (#512) 블라인드 게시글 조회 예외 처리

* refactor: (#512) 이미지 파일명 생성 기능 구현

* refactor: (#512) 이미지 저장 및 삭제 기능 구현

* refactor: (#512) 게시글 댓글 블라인드 예외 처리

* refactor: (#512) 게시글 작성, 수정, 삭제 로직 리팩토링

* refactor: (#512) 게시글 작성, 수정, 삭제 API 리팩토링

* chore: (#512) 코드 컨벤션 정리

* refactor: (#512) 게시글 요청, 응답 형식 수정

* refactor: (#512) 게시글 도메인 수정

* refactor: (#512) 요청, 응답 수정에 따른 변화 수정

* refactor: (#512) 게시글 수정 로직 개선

* refactor: (#512) 요청 파일 크기 제한 설정

* refactor: (#512) sequence가 필요한 메서드에서 sequence에 의존하도록 수정

* refactor: (#512) 코드 컨벤션에 맞게 name 속성 제거

* refactor: (#512) 게시글 옵션 예외 분리

* refactor: (#512) 임의의 url로 수정

* refactor: (#512) 람다식 컨벤션 수정

* refactor: (#512) enum 컨벤션 수정

* refactor: (#512) 변수명 수정

* refactor: (#512) 쿼리, 커맨드 트랜잭션 방식 명시

* refactor: (#512) early return 방식으로 수정

* refactor: (#512) 메서드 체이닝 방식으로 수정

* refactor: (#512) early return 방식으로 수정

* refactor: (#512) 게시글에 대한 신고 삭제 기능 구현

* refactor: (#512) 기존 게시글 옵션이 아닌 경우 예외 던지도록 수정

* refactor: (#512) 예외 타입 네이밍 수정

* refactor: (#512) 투표 수 int -> long 전환

* refactor: (#512) 게시글 옵션 ID 검증 로직 분리

* refactor: (#512) 충돌 해결하면서 터지는 테스트 수정

* refactor: (#512) 코드 컨벤션 수정

* refactor: (#512) hikari, JpaTransactionManager 로그 제거

* feat: (#512) tomcat 설정 환경변수 추가

* feat: (#512) 게시글 리팩토링

* design: (#541) 작성된 게시글 속 사진 가로 길이 80%으로 수정

---------

Co-authored-by: jero_kang <[email protected]>
Co-authored-by: 김영길/KIM YOUNG GIL <[email protected]>
Co-authored-by: Jun-Hyeok Sin <[email protected]>
Co-authored-by: lookh <[email protected]>
Co-authored-by: Gilpop8663 <[email protected]>
Co-authored-by: 최우창 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

웹팩의 code splitting, tree shaking 등을 사용하여 번들 사이즈 용량 줄이기
3 participants